@charset "utf-8";


.sidingImg {
	width: 100%;	
}

.profCont p, .profHidCont p {
	margin: 0 0 1vw 0;
	padding: 0.2vw;
	border: solid 1px #aaa;
	text-align: center;
	font-size: 0.9vw;
}
.profHidCont img  {
	width: 100%;
}
.profHidCont {
	position: relative;
	display: inline-block;
	width: 22%;
}
.profiles img {
	width: 100%;
}
.profiles h4, .profileHidden h4 {
	border-bottom: solid 1px #aaa;
	font-size: 1.1vw;
}
.profileHidden {
	position: absolute;
	top: 1vw;
	z-index: 30;
	width: 93.5%;
	margin: auto;
	background-color: white;
	border: solid 1px #aaa;
	padding: 1vw;
	box-shadow: 0px 0px 20px rgb(0, 0, 0, 0.7);
	display: none;
}
.blkOt {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(0, 0, 0, 0.5);
	z-index: 25;
	display: none;
}
.profClose {
	position: absolute;
	top: 1vw;
	right: 2.5vw;
	z-index: 35;
	font-size: 2.5vw;
	font-weight: bold;
	cursor: pointer;
}
.profClose:hover {
	top: 0.7vw;
	right: 2.5vw;
	font-size: 3vw;
}

.colrDrop {
	display: none;
	margin-bottom: 1vw;
}
.clrDrpBtn {
	display: inline-flex;
	cursor: pointer;
	border: solid 1px #999 ;
	padding: 0 1vw;
	margin-bottom: 1vw;
}
.clrDrpBtn p {
	font-size: 1vw;
}
.clrDrpBtn:hover {
	color: #000;
}
.clrDrpBtn span {
	font-size: 2vw;
	padding: 0.5vw 0 0 0.5vw;
	font-weight: bold;
}
.clrspop, .woodClrspop, .woodTonespop {
	position: relative;
	display: inline-flex;
	border: solid 1px #666;
	width: 1.9vw;
	height: 1.9vw;
}
.profilespop {
	position: relative;
	display: inline-flex;
	border: solid 1px #666;
	width: 13vw;
	height: 6vw;
}
.clrspopAfter, .woodClrspopAfter, .woodTonespopAfter{
	position: absolute;
	left: 1vw;
	bottom: 3vw;
	z-index: 20;
	border: solid 1px #999;
	background-size: 100%;
}
.clrspopAfter {
	width: 12vw;
	height: 12vw;
}
.woodTonespopAfter {
	width: 26vw;
	height: 14vw;
}
.profilespopAfter {
	position: absolute;
	left: -4vw;
	bottom: 9vw;
	z-index: 40;
	border: solid 1px #999;
	background-color: white;
	width: 32vw;
	height: 12vw;
}
.clrspopAfter p, .woodClrspopAfter p {
	position: absolute;
	z-index: 42;
	font-size: 1.1vw;
	background-color: #fff;
	padding: 2px 4px;
	border: solid 1px #aaa;
	text-align: right;
	top: -0.5vw;
	right: 0;
}
.profilespopAfter p {
	position: absolute;
	z-index: 20;
	font-size: 1.1vw;
	background-color: #fff;
	padding: 2px 4px;
	border: solid 1px #aaa;
	text-align: right;
	top: 1vw;
	right: 0;
}

/* STEEL COLORS */

.white {background-color: white;}
.black {background-color: black;}
.cashmere {background-color: #e9e6d4;}
.cream {background-color: #d1c2a1;}
.pebble {background-color: #897f6a;}
.sandlewood {background-color: #e3dfc6;}
.sierra {background-color: #6c553e;}
.moonlitmoss {background-color: #5e584b;}
.slate {background-color: #574f4b;}
.countryred {background-color: #581315;}
.burgundy {background-color: #492831;}
.chestnutbrown {background-color: #311f18;}
.commercialbrown {background-color: #382224;}
.midnightsurf {background-color: #535250;}
.wedgewoodblue {background-color: #6c747e;}



.entryDoorDetailsBtn {
	width: 100%;
	background-color: tomato;
	color: white;
	padding: 0.7vw;
	font-size: 1.2vw;
	cursor: pointer;
	opacity: 0.8;
}
.entryDoorDetailsBtn:hover{
	opacity: 0.9;
}
.entrygallery {
	position: relative;
	display: inline-block;
	width: 50%;
	vertical-align: top;
	cursor: pointer;
}
.galleryinner img{
	border: solid 2px #ccc;
	padding: 0.2vw;
	width: 100%;
}
.entrygallery:hover::after {
	content: "Click Image to Enlarge";
	position: absolute;
	top: -1.4vw;
	right: 0;
	color: #333;
	font-size: 1.1vw;
}

/* - Siding Content- */

#siding {
	display: block;
}



/* - End of Siding Content- */

/* - Start of Overlay - */


.smallOl_img {
	position: relative;
	z-index: 30;
	margin: auto;
	-webkit-animation-name: zoom;
	-webkit-animation-duration: 0.6s;
	animation-name: zoom;
	animation-duration: 0.6s; 
	border: 1vw solid white;	
	background-color: #fff;
}
.smallGallery {
	width: 85%;
	max-width: 1100px;
	margin: 4vw auto;
}
@-webkit-keyframes zoom {
	from {-webkit-transform:scale(0)} 
	to {-webkit-transform:scale(1)}
}  
@keyframes zoom {
	from {transform:scale(0)} 
	to {transform:scale(1)}
}
@-webkit-keyframes fade-in {
	from {opacity: 0;}
	to {opacity: 1;}
}
@keyframes fade-in {
	from {opacity: 0;}
	to {opacity: 1;}
}
.smallOlHd {
	position: absolute;
	top: 0;
	right: 0;
	color: white;
	font-size: 1.3vw;
	padding: 1.5vw 2vw;
	background-color: sandybrown;
	text-align: right;
}
.smallOlHd h3 {
	margin: 0;
}
.smallOLGallery img {
	width: 100%;
}
.OLGlsTab {
	position: absolute;
	top: -3.8vw;
	right: -1vw;
	z-index: 40;
	color: white;
	text-align: center;
	padding: 0.5vw 1vw;
	font-size: 1.3vw;
}

.OverlaycloseBtn {
	position: absolute;
	top: -3vw;
	right: -4vw;
	font-size: 3vw;
	color: white;
	z-index: 30;
	cursor: pointer;
}
.OverlaycloseBtn:hover::after  {
	content: "Close";
	position: absolute;
	top: 1vw;
	left: 3vw;
	padding: 0.2vw;
	background-color: white;
	border: solid 1px #ccc;
	color: black;
	font-size: 1vw;
}
.OLsmallBtnsprv, .OLsmallBtnsnxt {
	position: fixed;
	top: 45%;
	z-index: 30;
	font-size: 5vw;
	color: white;
	margin: 0 10px;
	cursor: pointer;
	opacity: 0.8;
	padding: 2vw;
}
.OLbuttonsnxt:hover, .OLbuttonsprv:hover, .OLsmallBtnsprv:hover, .OLsmallBtnsnxt:hover {
	opacity: 1;
}
.OLsmallBtnsprv {
    left: 0;
}
.OLsmallBtnsnxt {
    right: 0.5vw;
}
.cappingCounter, .smallOLCounter {
	position: absolute;
	font-size: 1.5vw;
	z-index: 30;
	color: #bbb;
	left: 0;
	top: -3vw;
}